<template>
  <div class="app-container">
    <div class="address-layout">
    </div>
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon">
            <div class="total-title">今日订单总数</div>
            <div class="total-value">{{orderStatisticResult.todayOrderNum||0}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon">
            <div class="total-title">今日销售总额</div>
            <div class="total-value">{{MONEY_JPY_ICON}} {{orderStatisticResult.todaySalesVolume||0}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon">
            <div class="total-title">昨日销售总额</div>
            <div class="total-value">{{MONEY_JPY_ICON}} {{orderStatisticResult.yestardaySalesVolume||0}}</div>
          </div>
        </el-col>
        <!--<el-col :span="6">-->
          <!--<div class="total-frame">-->
            <!--<svg-icon icon-class="total-week" class="total-icon">-->
            <!--</svg-icon>-->
            <!--<div class="total-title">近7天销售总额</div>-->
            <!--<div class="total-value">￥50000.00</div>-->
          <!--</div>-->
        <!--</el-col>-->
      </el-row>
    </div>
    <!-- <el-card class="mine-layout">
      <div style="text-align: center">
        <img width="150px" height="150px" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg">
      </div>
      <div style="text-align: center">mall全套学习教程连载中！</div>
      <div style="text-align: center;margin-top: 5px"><span class="color-main">关注公号</span>，第一时间获取。</div>
    </el-card> -->
    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger">({{omsOrderPendingAffairsResult.pendingPayOrderNums}})</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已完成订单</span>
              <span style="float: right" class="color-danger">({{omsOrderPendingAffairsResult.hasFinishedOrderNums}})</span>
            </div>
          </el-col>
           <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待发货订单</span>
              <span style="float: right" class="color-danger">({{omsOrderPendingAffairsResult.pendingDeliverOrderNums}})</span>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待确认收货订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
         
          <!-- <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">新缺货登记</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col> -->
          <!-- <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退款申请</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已发货订单</span>
              <span style="float: right" class="color-danger">({{omsOrderPendingAffairsResult.hasSendOrderNums}})</span>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退货订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col> -->
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">广告位即将到期</span>
              <span style="float: right" class="color-danger">({{omsOrderPendingAffairsResult.adExpiresNums}})</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{productOverviewResult.hasPublishProductNum}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{productOverviewResult.hasUnpublishProductNum}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{productOverviewResult.stockTenseProductNum}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{productOverviewResult.totalProductNum}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                <el-col :span="6" class="overview-item-title">全部商品</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{memberOverviewResult.todayAddNums}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{memberOverviewResult.yesterdayAddNums}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{memberOverviewResult.monthAddNums}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{memberOverviewResult.totalNums}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">订单统计</div>
      <el-row>
        <el-col :span="4">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399;font-size: 14px">本月订单总数</div>
              <div class="color-success" style="font-size: 24px;padding: 10px 0">{{chart.monthOrderCount}}</div>
              <!-- <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div> -->
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周订单总数</div>
              <div class="color-danger" style="font-size: 24px;padding: 10px 0">{{chart.weekOrderCount}}</div>
              <!-- <div>
                <span class="color-danger" style="font-size: 14px">-10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div> -->
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本月销售总额</div>
              <div class="color-success"  style="font-size: 24px;padding: 10px 0">{{MONEY_JPY_ICON}} {{chart.monthOrderSales}}</div>
              <!-- <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div> -->
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周销售总额</div>
              <div class="color-danger" style="font-size: 24px;padding: 10px 0;">{{MONEY_JPY_ICON}} {{chart.weekOrderSales}}</div>
              <!-- <div>
                <span  style="font-size: 14px">-10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div> -->
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="padding: 10px;border-left:1px solid #DCDFE6">
            <el-date-picker
              style="float: right;z-index: 1"
              size="small"
              v-model="orderCountDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleDateChange"
              :picker-options="pickerOptions">
            </el-date-picker>
            <div>
              <!--  -->
              <ve-line
                :data="chartData"
                
                :settings="chartSettings"
                ></ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import{
    fetchList,fetchChartList
  } from '@/api/home'
  
  import {str2Date,formatDate} from '@/utils/date';
  import {getUnredMessageSum} from '@/utils/index';
  import img_home_order from '@/assets/images/home_order.png';
  import img_home_today_amount from '@/assets/images/home_today_amount.png';
  import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
  const DATA_FROM_BACKEND = {
    columns: ['date', 'orderCount','orderAmount'],
    rows: [
      {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
      {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
      {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
      {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
      {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
      {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
      {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
      {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
      {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
      {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
      {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
      {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
      {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
      {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
      {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
    ]
  };
  export default {
    name: 'home',
    data() {
      return {
        moneyIcon:process.env.MONEY_ICON,
        MONEY_JPY_ICON:'JPY ￥',
        chart:{
          monthOrderCount:0,
          weekOrderCount:0,
          monthOrderSales:0,
          weekOrderSales:0,
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一月',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        orderCountDate: '',
        chartSettings: {
          // xAxisType: 'time',
          //area:true,
          // yAxisType: ['', '{{moneyIcon}}'],
          // yAxisName: ['订单数量', '订单金额'],
          // axisSite: { right: ['orderAmount']},
          labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额(JPY ￥)'}
        },
        chartData: {
          //columns: ['date', 'sales'],
          columns: ['date', 'orderCount','orderAmount'],
            rows: [
              // { '日期': '1月1日', '销售额': 123 },
              // { '日期': '1月2日', '销售额': 1223 },
              // { '日期': '1月3日', '销售额': 2123 },
              // { '日期': '1月4日', '销售额': 4123 },
              // { '日期': '1月5日', '销售额': 3123 },
              // { '日期': '1月6日', '销售额': 7123 }
            ]
        },
        loading: false,
        dataEmpty: false,
        img_home_order,
        img_home_today_amount,
        img_home_yesterday_amount,
        
        orderStatisticResult:{//头部的3个订单相关数据
          todayOrderNum:0,
          todaySalesVolume:0,
          yestardaySalesVolume:0
        },
        omsOrderPendingAffairsResult:{//待处理事务
          adExpiresNums:0,
          hasFinishedOrderNums:0,
          hasSendOrderNums:0,
          pendingDeliverOrderNums:0,
          pendingPayOrderNums:0
        },
        productOverviewResult:{//商品总览
          hasPublishProductNum:0,
          hasUnpublishProductNum:0,
          stockTenseProductNum:0,
          totalProductNum:0
        },
        memberOverviewResult:{//用户总览
          monthAddNums:0,
          todayAddNums:0,
          totalNums:0,
          yesterdayAddNums:0
        },
        
      }
    },
    created(){
      
      this.initOrderCountDate();
      this.getData();
      getUnredMessageSum().then((res)=>{
        if(res &&res.data>=0){
          this.$store.dispatch("RefreshUnreadMsgSum",res.data)
        }
      })
    },
    methods:{

      handleDateChange(){
        this.getData();
      },
      initOrderCountDate(){
        let start = new Date();
        // start.setFullYear(2018);
        // start.setMonth(10);
        // start.setDate(1);
        const end = new Date();
        end.setTime(start.getTime() - 1000 * 60 * 60 * 24 * 7);
        this.orderCountDate=[end,start];//上一周的数据
      },
      getData(){
        fetchList().then(response => {
            if(response.code === 200){
               //this.listLoading = false;
                let res = response.data;
                this.memberOverviewResult = res.memberOverviewResult;
                this.omsOrderPendingAffairsResult = res.omsOrderPendingAffairsResult;
                this.orderStatisticResult = res.orderStatisticResult;
                this.productOverviewResult = res.productOverviewResult;
            }
        });
        //console.log(this.orderCountDate);
        let tempObj={};
        tempObj.startDate =  formatDate(this.orderCountDate[0], 'yyyy-MM-dd');
        tempObj.endDate =  formatDate(this.orderCountDate[1], 'yyyy-MM-dd')
        fetchChartList(tempObj).then(res => {
            if(res.code === 200){
               //this.listLoading = false;
               console.log(res);
               let response = res.data;
               response.orderDateStatisticsList.map(item=>{
                  item.date = item.recordDateStr.substr(0,10);
                  item.orderCount = item.orderCount;
                  item.orderAmount= item.salesVolume;
                });
                this.chartData.rows=response.orderDateStatisticsList;
                this.chart = response;
            }
        });
        // setTimeout(() => {
        //   this.chartData = {
        //     columns: ['date', 'orderCount','orderAmount'],
        //     rows: []
        //   };
        //   for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
        //     let item=DATA_FROM_BACKEND.rows[i];
        //     let currDate=str2Date(item.date);
        //     let start=this.orderCountDate[0];
        //     let end=this.orderCountDate[1];
        //     if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
        //       this.chartData.rows.push(item);
        //     }
        //   }
        //   this.dataEmpty = false;
        //   this.loading = false
        // }, 1000)
      }
    }
  }
</script>

<style scoped>
  .app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
  }

  .address-layout {
  }

  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
  }

  .total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
  }

  .un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .un-handle-content {
    padding: 20px 40px;
  }

  .un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }
  .mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
  }
  .address-content{
    padding: 20px;
    font-size: 18px
  }
</style>
